<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>D3交互式数据可视化</title>
</head>
<body>
	<h1 class="test">click me</h1>
	<h2 class="test2">click me</h2>
	<ul>
		<li>如果某元素已经有了监听器，新的监听器会覆盖旧的</li>
		<li><strong>如果给同一事件添加多个监听器，需要修改名称：事件名后加一个点，然后再输入一个名称</strong></li>
		<li>删除监听器：d3.select(".test2").on("click.first",null)</li>
		<li>过度对象是没有on()的，不能对过度对象设置监听器，需要在调用transition()之前删除监听器</li>
	</ul>
	<script src="js/d3_3.5.7.js"></script>
	<script>
		var width = 500;
		var height = 500
		var svg = d3.select(".line").append('svg').attr({"width":width,"height":height});

		d3.select(".test").on("click.first",function() {
			d3.select(this).text("Thank you")
		}).on("click.second",function() {
			d3.select(this).style("color","red")
		})

		d3.select(".test2").on("click.first",function() {
			d3.select(this).text("Thank you")
		}).on("click.second",function() {
			d3.select(this).style("color","red")
		})
		d3.select(".test2").on("click.first",null)
	</script>
</body>
</html>